<template>
  <div>
    <div class="product-en main-width">
      <span class="">TECH DEVELOPMENT</span>
    </div>
    <ul class="page-nav main-width">
      <li><nuxt-link to="/details/tech/platform">研发平台</nuxt-link></li>
      <li><nuxt-link to="/details/tech/experts01">专家团队</nuxt-link></li>
    </ul>

    <div class="div-link-all main-width">
      <div class="two-part part yf-img">
        <nuxt-link to="/details/tech/platform"></nuxt-link>
      </div>
      <div class="two-part part zj-img">
        <nuxt-link to="/details/tech/experts01"></nuxt-link>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'tech'
  }
</script>

<style scoped lang="less">
  .div-link-all{
    height:3.24rem;
    /*height:3.84rem;*/
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    font-size: 0.15rem;
    margin-top: 0.7rem;
  }
  .div-link-all a{
    display: block;
    height:100%;
    color:#fff;
  }
  .two-part{
    width: 49.5%;
    background-color: #ebe2d0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .yf-img{
    background-image: url("~static/img/technology/yf.png");
  }
  .yf-img:hover{
    background-image: url("~static/img/technology/yf-act.png");
    background-color: #005284;
    transition: background-color .5s;
  }
  .zj-img{
    background-image: url("~static/img/technology/zj.png");
  }
  .zj-img:hover{
    background-image: url("~static/img/technology/zj-act.png");
    background-color: #004935;
    transition: background-color .5s;
  }
  .part{
    height:100%;
    position: relative;
  }
</style>
